<template>
  <div>

	<myheader></myheader>
	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
            
      商品名称：<input type="text" v-model="name">
      <br>
      商品类别：<Select v-model="category" :datas='param'></Select>
      <br>
      商品描述：<textarea row='5' v-autosize v-wordcount='30' v-model="desc"></textarea>
      <br>
      演示视频：<input type="file" @change="upload">
      <video height="200" width="300" :src="src" controls='controls'></video>
      <br>
      商品规格：<br>
      颜色：<input type="text" v-model="color">
      薄厚：<input type="text" v-model="season">
      <br>
      商品价格：<input type="text" v-model="price">
      <br>
      <Button @click="submit" color='blue'>添加商品</Button>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
// 组件包含
import myheader from './myheader'
import myfooter from './myfooter'

export default {
  data () {
    return {
      // 面包屑导航
      datas: [{title:'首页',route:{name:'index'}},{title:'添加商品页面'}],
      name: '',
      desc: '',
      param: ['服饰', '箱包', '家电'],
      category: '服饰',
      // 原始路径
      src: '',
      mysrc: '',
      color: '',
      season: '',
      price: '',
      // 记录商品id
      cate: {}
    }
  },
  // 定义组件
  components:{
	  'myheader': myheader,
	  'myfooter': myfooter,
  },

  mounted:function(){
    // 调用商品分类信息接口
    this.get_cateinfo();
  },

  methods:{
    // 获取商品分类信息
    get_cateinfo: function () {
    // 发送请求
    this.axios.get('http://127.0.0.1:8000/categoryinfo/').then((result) => {
      console.log(result.data);

      var catebox = [];

      // 循环赋值
      for(var i = 0, l = result.data.length; i<l; i++){
        catebox.push(result.data[i]['cname']);
        // 反向赋值
        this.cate[result.data[i]['cname']] = result.data[i]['id'];
      }
      console.log(catebox);
      this.param = catebox;

    })
  },

  //提交商品添加
  submit: function () {

    console.log(this.category);
    console.log(this.cate);

    // 将变量转换为字符串
    var param_str = {'color': this.color, 'season': this.season};
    console.log(param_str);
    // 强转
    param_str = JSON.stringify(param_str);
    console.log(param_str);

    // 发送请求
    this.axios.get('http://127.0.0.1:8000/addgoods/',
    {params:{
      name: this.name,
      img: 'your_name.png',
      video: this.mysrc,
      desc: this.desc,
      param: param_str,
      cid: this.cate[this.category],
      price: '100'
    }}).then((result) => {
    console.log(result);
    
    this.$Message(result.data.message);	  
		})
  }
  }
}


</script>
 
<style>



</style>